<template>
    <d2-container>
        <el-form :inline="true" >
           <div style="font-weight: 10px;font-size: 20px">教务提成规则
            <div style="font-size:16px;font-weight: 5px">小于最低出勤率的规则，提成为0,如果没有规则，没有提成</div>
            <div style="font-size:12px;font-weight: 5px;margin-top:10px">每月1号自动计算教务提成</div>
           </div>
            
                <el-button type="primary" style="float:right;margin-bottom: 10px" icon="el-icon-plus" @click='showRule = true'>新增规则</el-button>
        </el-form>
        <el-table :data="rule" border style="width: 100%">
            <el-table-column prop="level" label="学生出勤率(%)"></el-table-column>
           
            <el-table-column  label="创收提成比例(%)">
              <template slot-scope='scope'>
                <el-input v-model='scope.row.percentage'></el-input>
              </template>
              
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click="deleteClick(scope.$index)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
<el-button type="primary" @click="save" style='float:right;margin-top: 20px' >保存</el-button>
        <el-dialog
    title="新提成规则"
    :visible.sync="showRule"
    width="40%"
    >
  学生出勤率(大于等于%):<el-input v-model='level' style="width: 100%;margin-bottom: 20px" type='number' step='0.1' min=0></el-input>
  创收提成比例：<el-input v-model='percentage' style="width: 100%" type='number' step='0.1' min=0 max=100></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="showRule = false">取 消</el-button>
    <el-button type="primary" @click="newRule">确 定</el-button>
  </span>

</el-dialog>

</d2-container>
</template>

<script>
    import request from "@/plugin/axios";
        import {mapState} from "vuex";

    export default {
        data() {
            return {
                dataList: [],
                total: 0,
                pageSize: 10,
                currentPage: 1,
                dataSearch: {},
                addLocation : false,
                newLocationName : '',
                newLocationLatitude : 0,
                newLocationLongitude : 0,
                address : '',
                memo : '',
                city :'',
                distance : 50,
                showRule :false,
                level : undefined,
                percentage : undefined,
                rule :[]
            };
        },
         computed: {
            ...mapState('d2admin/user', ['info']),
        },
        methods: {
            
            newRule (){
              if (this.level < 0){
                this.$message('出勤率不能小于0')
                return false
              }
              if (this.percentage < 0){
                this.$message('提成比例不能小于0')
                return false
              }
              if (this.percentage > 100){
                this.$message('提成比例不能大于100')
                return false
              }
              this.rule.push({level:this.level,percentage:this.percentage})
              this.rule = this.rule.sort((a,b)=>{return a.level - b.level})
              this.level = undefined
              this.percentage = undefined
              this.showRule = false
            },
            

            deleteClick(index) {
                this.$confirm("此操作将删除该条提成规则, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                            this.rule.splice(index,1)
                            return false
                          })
                        
            },

            save(){
              request({
                    url: "/staff/registrarCommissionChange",
                    method: "post",
                    data: {school:this.school,rule:this.rule}
                }).then(res => {
                   if (res.code == 200){
                    this.$message('保存成功！本月结算开始生效')
                    this.getDataList()
                   }
                   else{
                    this.$message('保存失败')
                   }

                });
            },
            getDataList() {
                // var datax = data
                // datax.school = this.school
                request({
                    url: "/staff/getRegistrarCommission",
                    method: "post",
                    data: {school:this.school}
                }).then(res => {
                    console.log(res,'jojo')
                    this.rule = res.data == undefined ? [] : res.data.rule

                });
 
    }
  },
        created() {
          this.school = this.info.school[0]._id
            this.getDataList();
        }
    };
</script>
